<template>
  <div class="main_box">
    <CommonHeader title="征求意见栏"></CommonHeader>
    <div class="btn_header">
      <van-button type="info" @click="toAdd" icon="plus" size="small"
        >新增</van-button
      >
    </div>
    <div class="nav_box">
      <div class="nav_content">
        <div
          class="nav_item"
          :class="state == item.value ? 'active' : ''"
          v-for="item in selectList"
          :key="item.value"
          @click="changeNav(item)"
        >
          {{ item.text }}
        </div>
      </div>
    </div>
    <div class="detail_box" v-if="state == '2'">
      <div class="content">
        <div class="table_thead">
          <div class="th">功能模块</div>
          <div class="th">反馈时间</div>
          <div class="th">处理状态</div>
        </div>
        <div
          class="table_tbody"
          v-for="(item, index) in ptdataList"
          :key="index"
          @click="toPlateDetail(item)"
        >
          <div class="td">{{ item.functionName }}</div>
          <div class="td">{{ formateDate(item.gmtCreate) }}</div>
          <div class="td" :class="item.feedbackStatus == '0' ? 'red' : 'green'">
            {{ formateStatus(item.feedbackStatus) }}
          </div>
        </div>
      </div>
    </div>
    <div class="detail_box" v-else>
      <div class="content">
        <div class="table_thead">
          <div class="th">指标名称</div>
          <div class="th">反馈时间</div>
          <div class="th">处理状态</div>
        </div>
        <div
          class="table_tbody"
          v-for="(item, index) in zbdataList"
          :key="index"
          @click="toAbnormalDetail(item)"
        >
          <div class="td">{{ item.employeeQuotaRecordDO.quotaName }}</div>
          <div class="td">{{ formateDate(item.gmtCreate) }}</div>
          <div class="td" :class="item.feedbackStatus == '0' ? 'red' : 'green'">
            {{ formateStatus(item.feedbackStatus) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from "@/components/commonHeader";
// import { Toast } from 'vant'
export default {
  // eslint-disable-next-line
  name: "RedCard",
  components: {
    CommonHeader,
  },
  data() {
    return {
      selectList: [
        {
          text: "指标疑议",
          value: "1",
        },
        {
          text: "平台提升意见",
          value: "2",
        },
      ],
      state: "1",
      employId: "",
      areaId: "",
      employName: "全部",
      zbdataList: [], // 指标列表数据实体
      ptdataList: [], // 平台列表数据
    };
  },
  computed: {
    formateDate() {
      return function (datetime) {
        if (datetime) {
          const date = datetime.slice(0, 10);
          const time = datetime.slice(11, 19);
          return date + "  " + time;
        } else {
          return "";
        }
      };
    },
    formateStatus() {
      return function (status) {
        if (status == 0) {
          return "待处理";
        } else {
          return "已处理";
        }
      };
    },
  },
  created() {
    this.ptabmornal();
    this.zbabmornal();
  },
  methods: {
    toAdd() {
      let path = "";
      if (this.state == "1") {
        path = "/zbadnormal";
      } else {
        path = "/ptadnormal";
      }
      console.log(this.$route.query.issueNoList);
      this.$router.push({
        path: path,
        query: {
          issueNoList: this.$route.query.issueNoList,
        },
      });
    },
    //平台
    ptabmornal() {
      const params = {
        page: 1,
        limit: 9999,
      };
      this.$api.ptabnormalList(params).then((res) => {
        if (res.errno === 200) {
          const rows = res.data.items || [];
          this.ptdataList = rows;
        } else {
          this.ptdataList = [];
        }
      });
    },
    // 指标
    zbabmornal() {
      const params = {
        // employId: sessionStorage.getItem('employId'),
        page: 1,
        limit: 9999,
      };
      this.$api.zbabnormalList(params).then((res) => {
        if (res.errno === 200) {
          const rows = res.data.items;
          this.zbdataList = rows;
        } else {
          this.zbdataList = [];
        }
      });
    },
    changeNav(item) {
      this.state = item.value;
    },
    toPlateDetail(item) {
      let name = "";
      if (item.employeeVO) {
        name = item.employeeVO.name;
      }
      this.$router.push({
        path: "/ptadnormalDetail",
        query: {
          content: item.content,
          feedbackStatus: item.feedbackStatus,
          employName: name,
          functionName: item.functionName,
          gmtCreate: item.gmtCreate,
        },
      });
    },
    toAbnormalDetail(item) {
      let name = "";
      if (item.employeeVO) {
        name = item.employeeVO.name;
      }
      this.$router.push({
        path: "/zbadnormalDetail",
        query: {
          content: item.content,
          feedbackStatus: item.feedbackStatus,
          employName: name,
          quotaName: item.employeeQuotaRecordDO.quotaName,
          issueNo: item.employeeQuotaRecordDO.issueNo,
        },
      });
    },
  },
};
</script>

<style scoped>
.btn_header {
  display: flex;
  justify-content: left;
  padding: 10px 15px;
}
.detail_box {
  width: 100%;
  height: calc(100vh - 140px);
  padding: 10px 15px;
  box-sizing: border-box;
}
.detail_box .content {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  background-color: #fff;
  border-radius: 8px;
  text-align: left;
}
.detail_box .content .head {
  max-width: 200px;
  height: 20px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  border-left: 4px solid #367fff;
  padding-left: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.detail_box .content .table_content {
  border-top: 1px solid #efefef;
}
.table_thead,
.table_tbody {
  display: flex;
  padding: 10px;
  color: #d3d7e0;
  box-sizing: border-box;
  border-bottom: 1px solid #efefef;
}
.table_thead .th,
.table_tbody .td {
  width: 33.3%;
  text-align: center;
  box-sizing: border-box;
}
.table_tbody .td {
  color: #a3a7ad;
}
.table_tbody .td.red {
  color: #e43c26;
}
.table_tbody .td.green {
  color: #5bc55a;
}
.main_box {
  min-height: 100vh;
  background-color: #f4f5fa;
}
.nav_box {
  width: 100%;
  background-color: #fff;
}
.nav_content {
  width: 100%;
  display: flex;
}
.nav_content .nav_item {
  width: 49%;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #999;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.nav_content .nav_item.active {
  color: #333;
}
.nav_content .nav_item.active::after {
  display: block;
  content: "";
  width: 50px;
  border-bottom: 2px solid #1b68eb;
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -25px;
}

.nav_wrap {
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}
.nav_wrap .tit {
  width: 120px;
  font-size: 13px;
  color: #999;
}
.nav_wrap .content {
  width: 120px;
  font-size: 13px;
  color: #333;
  display: flex;
  line-height: 18px;
}
.nav_wrap .content .down {
  width: 15px;
  height: 8px;
  background: url("../../assets/image/down.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 10px;
  top: 5px;
}
</style>